<template>
  <div>
    <div style="height: 65px; background-color: #fff; display: flex; align-items: center; border-bottom: 1px solid #ddd">
      <div style="flex: 1">
        <div style="padding-left: 20px; display: flex; align-items: center">
          <img src="@/assets/imgs/logo.png" alt="" style="width: 40px">
          <div style="font-weight: bold; font-size: 24px; margin-left: 5px">爱你多亿点餐系统</div>
        </div>
      </div>
      <div style="padding-right: 10px; display: flex; align-items: center;">
        <el-upload
          class="avatar-uploader no-border"
          action="/api/files/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img :src="avatarUrl" alt="" style="width: 50px; height: 50px; border-radius: 50%; cursor: pointer; object-fit: cover;">
        </el-upload>
        <span style="margin:0 15px">{{ user.username }}</span>

      </div>
    </div>

    <div style="display: flex">
      <div style="width: 200px; border-right: 1px solid #ddd; min-height: calc(100vh - 60px)">
        <el-menu
            router
            style="border: none"
            :default-active="$route.path"
            :default-openeds="['/home', '2']"
        >
          <el-menu-item index="/home">
            <el-icon><HomeFilled /></el-icon>
            <span>系统首页</span>
          </el-menu-item>
          <el-sub-menu index="/product">
            <template #title>
              <el-icon><Menu /></el-icon>
              <span>餐品管理</span>
            </template>
            <el-menu-item index="/productCategory">
              <el-icon><Document /></el-icon>
              <span>餐品类别</span>
            </el-menu-item>
            <el-menu-item index="/productInfo">
              <el-icon><DishDot /></el-icon>
              <span>餐品信息</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="/order">
            <template #title>
              <el-icon><Checked /></el-icon>
              <span>订单管理</span>
            </template>
            <el-menu-item index="/OrderMaster">
              <el-icon><DocumentChecked /></el-icon>
              <span>订单信息</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="/security">
            <template #title>
              <el-icon><UserFilled /></el-icon>
              <span>安全管理</span>
            </template>
            <el-menu-item index="/login-log">
              <el-icon><Document /></el-icon>
              <span>登录日志</span>
            </el-menu-item>
            <el-menu-item index="/password">
              <el-icon><ShoppingBag /></el-icon>
              <span>修改密码</span>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item @click="logout">
            <el-icon><SwitchButton /></el-icon>
            <span>退出系统</span>
          </el-menu-item>
        </el-menu>
      </div>

      <div style="flex: 1; width: 0; background-color: #f8f8ff; padding: 10px">
        <router-view />
      </div>
    </div>

  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request.js'
const $route = useRoute()
const router = useRouter()  // 创建 router 实例

// 解析 localStorage 中的用户数据
const userStr = localStorage.getItem('user')
const user = userStr ? JSON.parse(userStr) : {}

// 头像URL状态
const avatarUrl = ref('http://t0v265sy9.hd-bkt.clouddn.com/7aba3182-78a7-434b-a144-c1cd21589c77.jpg')

// 上传前验证
const beforeAvatarUpload = (file) => {
  // const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt10M = file.size / 1024 / 1024 < 10

  // if (!isJPG) {
  //   ElMessage.error('头像图片只能是 JPG 或 PNG 格式!')
  // }
  if (!isLt10M) {
    ElMessage.error('头像图片大小不能超过 10MB!')
  }
  return isLt10M
}

// 上传成功回调
const handleAvatarSuccess = (res) => {
  if (res.code === '200') {
    avatarUrl.value = res.data
    ElMessage.success('头像更换成功')
    // 可以将新头像URL保存到localStorage或发送到后端
    localStorage.setItem('user-avatar', res.data)
  } else {
    ElMessage.error(res.msg || '头像上传失败')
  }
}

const logout = () => {
  ElMessageBox.confirm('确定退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    localStorage.removeItem('user')
    localStorage.removeItem('token')
    router.push('/login')
  }).catch(() => {
    // 取消退出登录
    ElMessage.success('已取消')
  })
}

// 页面加载时从localStorage获取头像
const savedAvatar = localStorage.getItem('user-avatar')
if (savedAvatar) {
  avatarUrl.value = savedAvatar
}

</script>

<style scoped>
/* 添加以下样式来隐藏上传组件的边框 */
.no-border :deep(.el-upload) {
  border: none !important;
  border-radius: 50%;
}
.el-menu-item.is-active {
  background-color: #dcede9 !important;
}
.el-menu-item:hover {
  color: #11A983;
}
:deep(th)  {
  color: #333;
}
</style>